<template>
    <Page class="basic company">
        <template #header>
            <EdCascader :cascaderParams="cascaderParams" v-model="queryForm.merchantName"></EdCascader>
            <el-input v-model="queryForm.houseNum" placeholder="房屋编号"/>
            <el-input v-model="queryForm.ClientName" placeholder="客户名称"/>
            <el-input v-model="queryForm.mobile" placeholder="手机号"/>
            <el-date-picker
                v-model="queryForm.pickerTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束">
            </el-date-picker>
            <EdSelect v-model="queryForm.LeaveMessage" :selectParams="selectParams" placeholder="留言类型"></EdSelect>
            <el-checkbox v-model="queryForm.Refresh" class="marginLeft8 marginRight8">自动刷新</el-checkbox>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重置</el-button>
        </template>
        <PageCard title="微信留言列表">
            <ApiTable :api="load" ref="table" :params="queryForm">
                <el-table-column :show-overflow-tooltip="true" prop="categoryName" label="发送时间"/>
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="客户名称"/>
                <el-table-column :show-overflow-tooltip="true" label="是否重要">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 0">是</div>
                        <div v-if="scope.row.type == 1">否</div>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="categoryName" label="分期/园区"/>>
                <el-table-column :show-overflow-tooltip="true"  label="楼栋">
                    <template slot-scope="scope">
                        <span v-if="scope.row.point">{{scope.row.point}} 1号楼 </span>
                        <span v-if="scope.row.point && scope.row.money">4号楼</span>
                        <span v-if="scope.row.money">{{scope.row.money}} 10号楼</span>
                        <span v-if="scope.row.money">{{scope.row.money}} 3号楼</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="单元">
                    <template slot-scope="scope">
                        <span v-if="scope.row.point">{{scope.row.point}} 一单元 </span>
                        <span v-if="scope.row.point && scope.row.money">二单元</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="status" label="房屋编号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="手机号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="type" label="留言类型"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="floor" label="内容"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border"  @click="detail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
    </Page>
</template>

<script>
    import EdSelect from 'src/components/EdSelect.vue'
    import EdCascader from 'src/components/EdCascader.vue'
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import EdTable from "src/components/EdTable.vue";
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    import {getAllCategory ,availableType ,shelfProduct ,unShelfProduct, productList} from "./api.js";
    import { defineComponent } from 'vue'
    export default defineComponent({
        name: "CommodityList",
        components:{
            EdTable,
            EdConfirmDelete,
            Page, PageCard, ApiTable,
            EdSelect,
            EdCascader
        },
        data(){
            return{
                queryForm:{
                    merchantName:"",
                    houseNum:"",
                    ClientName:"",
                    mobile:'',
                    pickerTime:'',
                    LeaveMessage:'',
                    LeaveMessage:'',
                    Refresh:''
                },
                selectParams:{
                    placeholder:"请选择商品类型",
                    options:[],
                    props: {label:"desc", value:"type"}
                },
                cascaderParams:{
                    placeholder:"请选择分期/楼栋/单元/房间",
                    props:{label:'categoryName',value:'id',emitPath:false,checkStrictly: true},
                    options: []
                },
                selectParams:{
                    placeholder:"留言类型",
                    options:[],
                    props: {label:"desc", value:"type"}
                },
                type:null,
                confirmRow:{},
                activeValue:1,
                inactiveValue:0 || 2,
            }
        },
        mounted(){

            this.getAllCategory()
            this.availableType()
            localStorage.removeItem("formRule_key")

            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })
        },
        methods:{
            load:productList,
            getAllCategory(){
                getAllCategory({}).then(response => {
                    if(response.code == 20000) {
                        this.cascaderParams.options = response.data
                    }
                })
            },
            availableType(){
                availableType().then(response => {
                    if(response.code == 20000) {
                        this.selectParams.options = response.data
                    }
                })
            },
            changeShowStatus(row){
                let urlFn = null;
                // 上架是1 没有点过是0 下架了是2
                if(row.publishStatus == 1){
                    urlFn = shelfProduct;
                }else {
                    urlFn = unShelfProduct;
                }
                urlFn({id:row.id}).then(() => {})
            },
            detail(row){
                this.$router.push({
                    path: '/property/WexinMessage/Detail',
                    query: {id:row.id}
                })
            },

            search(){
                this.$refs.table.load(1)
            },
            reset(){
                this.queryForm = {
                    merchantName:"",
                    houseNum:"",
                    ClientName:"",
                    mobile:'',
                    pickerTime:'',
                    LeaveMessage:'',
                    pickerTime:'',
                    LeaveMessage:'',
                    Refresh:''
                };
                this.$nextTick(()=>{
                    this.$refs.table.load(1,10)
                })
            }
        }
    })
</script>

<style scoped lang="scss">
    .spanLabel{
        width: 8px;height: 8px;border-radius: 50%;display: inline-block;vertical-align: 1px
    }
    .spanLabelWidth{
        width: 6px;height: 6px;
    }
    :deep .el-icon-plus{
        margin-left: -5px !important;
    }
</style>